<template>
	<view class="invite-wrapp">
		<view class="tab flex">
			<view class="tab-nav" v-for="(item,index) in tabList" :key="item.id" @click="tabClick(index)">
				<view :class="['title',{'active': index == tabLindex}]">
					{{item.title}}
				</view>
				<view class="line" v-if="index == tabLindex"></view>
			</view>
		</view>
		<block v-if="tabLindex == 0">
			<view class="content">
				<image src="https://img.367edu.com/200742/0/d361e195-3e5a-4404-bffd-d1b82c0e87c4/original"
					mode="widthFix"></image>
			</view>
			<view class="invite-footer ">
				<view class="foot-cont flex">
					<u-button shape="circle" text="生成邀请海报" color="#fff" @click="openCanvar"></u-button>
					<view class="line"></view>
					<!-- #ifdef H5 -->
					<u-button shape="circle" text="立即邀请" color="#FCCB33" @click="isH5 = true"></u-button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<u-button shape="circle" text="立即邀请" color="#FCCB33" open-type="share"></u-button>
					<!-- #endif -->
				</view>
			</view>
		</block>

		<block v-if="tabLindex == 1">
			
			
			
			
			
			<view class="rank-cont" style="position: relative;">
				
				<view class="u-flex content" style="background-color: rgba(0,0,0,.3);border-radius: 60rpx;margin: 20rpx 30rpx;position: absolute;width: calc(100% - 60rpx)">
					<swiper class="flex-1" :autoplay="true" :interval="2000" :circular="true"
						style="height: 60rpx;line-height: 60rpx;color:#fff;padding-left: 40rpx;font-size: 24rpx;" :duration="1000" :vertical="true">
						<swiper-item v-for="(item,i) in msg_arr" :key="i">
							<view>
								<view class="fontGrey u-line-1" style="width: 100%;">
									{{item.name}} 分享获得{{item.num}}积分
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				
				
				<view class="rank-top"></view>
				<view class="rank-main flex">
					<view class="title">
						邀请好友报读
					</view>
					<!-- <view class="sub">
						可获得好友支付的金额5%返利
					</view> -->
					<view class="btn">
						<u-button shape="circle" text="立即邀请" color="#FE4253" @click="tabLindex = 0"></u-button>
					</view>
					<view class="foot">
						我已邀请{{invited_user.num}}位好友 >
					</view>
				</view>
				<view class="rank-list">
					<view class="rank-list-tab flex">
						<view class="item" v-for="(item,index) in rankTab" :key="index" @click="rankClick(index)">
							<view class="title">
								{{item}}
							</view>
							<view class="line" v-if="index == rankIndex"></view>
						</view>
					</view>
					<view class="rank-list-tip flex">
						<text class="txt">排名</text>
						<text class="txt">{{rankIndex==0?"名称":"用户" }}</text>
						<text class="txt">奖励</text>
					</view>
					<view class="rank-list-more">
						<block>
							<view class="item item-order flex" v-for="(item,index) in rankList" :key="index">
								<view class="left flex">
									<view class="num">
										<text>{{invited_user.point}}+</text>
									</view>
									<view class="avater">
									<u--image :showLoading="true" src="https://program.qdlearn.cn/ma/images/hy.jpg" width="80" height="80" shape="circle"></u--image>
									</view>
									<view class="name">
										{{invited_user.name}}
									</view>
								</view>
								<view class="right">
									获得{{invited_user.integral}}积分
								</view>
							</view>
						</block>
						<view class="item flex" v-for="(ite,indx) in result_List" :key="indx">
							<view class="left flex">
								<view class="num">
									<text v-if="indx>2">{{indx+1}}</text>
									<block v-else>
										<u--image :showLoading="true" :src="`/static/invite/yq_0${5+indx}.jpg`" width="60"
											height="60"></u--image>
									</block>

								</view>
								<view class="avater">
									<u--image :showLoading="true" :src="getImgUrl(ite.maum)" width="80" height="80" shape="circle"></u--image>
								</view>
								<view class="name">
									{{ite.name}}
								</view>
							</view>
							<view class="right">
								获得{{ite.point}}积分
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="tabLindex == 2">
			<view class="list1" v-if="p_List.length>0">
				<view class="item" v-for="(item,index) in p_List" :key="index">
					<view class="item-header flex">
						<view class="left">
							<view class="img">
								<u--image src="https://program.qdlearn.cn/ma/images/hy.jpg" width="160" height="160" shape="circle"></u--image>
							</view>
							<view class="title">
								{{item.username}}
							</view>
						</view>
						<view class="center">
							<view class="icon flex">
								<u-icon name="arrow-rightward" size="40" color="#fff"></u-icon>
							</view>
							<view class="title">
								我邀约
							</view>
						</view>
						<view class="left">
							<view class="img">
								<u--image src="https://program.qdlearn.cn/ma/images/hy.jpg" width="160" height="160" shape="circle"></u--image>
							</view>
							<view class="title">
								{{item.to_user}}
							</view>
						</view>
					</view>
					<view class="item-main">
						<view class="li flex">
							<image src="../../static/invite/my1.png" mode=""></image>
							<text>报读院校：{{item.school}}</text>
						</view>
						<view class="li flex">
							<image src="../../static/invite/my2.png" mode=""></image>
							<text>报读专业：{{item.major}}</text>
						</view>
						<view class="li flex">
							<image src="../../static/invite/my3.png" mode=""></image>
							<text>报名时间：{{item.createtime}}</text>
						</view>
					</view>

					<view class="item-footer flex">
						<text>获得邀约奖金</text>
						<text class="num">+{{item.share_points}}</text>
					</view>

					<view class="item-succ">
						<image src="../../static/invite/succ.png" mode="widthFix"></image>
					</view>
				</view>

			</view>
			<view v-if="p_List.length == 0" class="cm-none-tips">
				<image src="../../static/images/none_tip.png" alt="" mode="aspectFit"></image>
				<view>暂无邀约见证~</view>
			</view>
			
			
			
		</block>



		<cm-painter :ewmImg="ewmImg" :avator="userAvator" :userName="userName" @painterSucc="painterSucc"
			 @cancelCanvas="showCanvas = false" v-if="showCanvas"></cm-painter>


		<view class="pop-cover" v-if="isH5">
			<view class="pop-cover-bg" @click="isH5 = false"></view>
			<view class="pop-cover-tip">
				<view class="cont">
					请点击右上角<br>
					将它发送给指定朋友<br>
					或者分享到朋友圈
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Auth from '@/utils/auth';
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';

	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import store from '@/store/index.js'

	export default {
		data() {
			return {
				tabLindex: 0,
				invited_user:[],
				msg_arr:[],
				tabList: [{
						id: 1,
						title: "邀约有礼"
					},
					{
						id: 2,
						title: "邀请排行榜"
					},
					{
						id: 3,
						title: "我的邀请"
					}
				],
				showPop: false,
				imgsPath: '', // 海报图片地址
				rankTab: ['邀请奖励排行榜', '邀请人数排行榜'],
				rankIndex: 0,
				rankList: [{
					id: 1
				}],
				isH5: false,
				ewmImg: '',
				// ----------- 此处需要默认 ------
				userAvator: 'https://cdn.uviewui.com/uview/album/1.jpg',
				userName: '刘星',
				showCanvas: false,
				p_List: [],
				result_List:[],
			};
		},
		onLoad(opt) {
			this.tabLindex = opt.tab ? opt.tab : 0
			this.getAuth();
			this.rankClick(0);
		},
		onShareAppMessage: function() {
			return {
				title: '邀请有礼',
				desc: '一起来',
				path: '/inside/invite/invite?pid=' + Auth.getUser().user_id // 路径，传递参数到指定页面。
			}
		},
		methods: {
			tabClick(i) {
				this.tabLindex = i;

				if (i == 2) {
					this.invitePeople();
				}
			},
			getAuth() {
				if (Auth.getUser()) {
					this.userAvator = Auth.getUser().avatar
					this.userName = Auth.getUser().nickname
				}
			},
			getImgUrl(image){
			   return "https://cdn.uviewui.com/uview/album/"+image;
			},
			toLink() {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						this.$u.toast("复制成功");
					},
					fail: function() {
						this.$u.toast("复制失败");
					}
				});
				//#endif
			},
			openCanvar() {
				var _this = this
				uni.showLoading({
					title: '加载中'
				});
				Rest.post(Api.ZHUIGE_Invite_Ewm).then(res => {
					if (res.code == 0) {
						_this.ewmImg = res.data;
						_this.showCanvas = true
					} 

				}, err => {
					console.log(err)
				});
			},
			painterSucc(el) {
				this.imgsPath = el
			},
			invitePeople(){
				Rest.post(Api.ZHUIGE_Index_InvitePeople, {
					
				}).then(res => {
					if (res.code == 0) {
						this.p_List = res.data.invite_reward;
						
					} else {
						this.$u.toast(res.msg);
					}
				
				}, err => {
					console.log(err)
				});
			},
			rankClick(i) {
				this.rankIndex = i
				Rest.post(Api.ZHUIGE_Index_Invite, {
					'type': i
				}).then(res => {
					if (res.code == 0) {
						this.result_List= res.data.list;
						this.invited_user = res.data.user;
						this.msg_arr = res.data.msg_arr;
					} else {
						this.$u.toast(res.msg);
					}
				
				}, err => {
					console.log(err)
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.cm-none-tips {
		text-align: center;
		padding: 100rpx;
	}
	.cm-none-tips image {
		height: 200rpx;
		width: 200rpx;
		margin-bottom: 30rpx;
	}
	.cm-none-tips view {
		font-size: 24rpx;
		font-weight: 300;
		color: #999999;
	}
	
	.invite {
		
		&-wrapp {
			min-height: 100vh;
			padding-bottom: env(safe-area-inset-bottom);

			.tab {
				justify-content: space-between;
				align-items: center;
				height: 104rpx;

				&-nav {
					position: relative;
					flex: 1;
					text-align: center;

					.line {
						width: 160rpx;
						height: 4rpx;
						background-color: #D92F33;
						position: absolute;
						left: 50%;
						top: 50rpx;
						transform: translateX(-50%);
					}
				}

				.active {
					color: #D92F33;
				}
			}

			.rank {
				&-cont {
					background-color: #FE4253;
					flex: 1;
					position: relative;
					padding-bottom: 48rpx;
				}

				&-top {
					background: url(https://img.367edu.com/200742/0/d4f16150-0ba9-47af-8097-41d520a8c850/original);
					background-size: 100% 100%;
					height: 700rpx;
					width: 100%;
				}

				&-main {
					margin: 0 40rpx;
					background-color: #fff;
					border-radius: 16rpx;
					flex-direction: column;
					align-items: center;
					padding: 32rpx 0;
					font-size: 32rpx;

					.title {
						color: #000;
					}

					.sub {
						padding: 24rpx;
						color: #F94555;
						font-size: 36rpx;
					}

					.btn {
						width: 70%;
					}

					.foot {
						padding: 20rpx 0 10rpx;
						border-bottom: 2rpx solid #999;
					}
				}

				&-list {
					margin: 40rpx 40rpx;
					background-color: #fff;
					border-radius: 16rpx;
					padding: 28rpx;

					&-tab {
						justify-content: space-between;

						.item {
							position: relative;
							flex: 1;
							text-align: center;

							.title {
								font-size: 30rpx;
								padding-bottom: 20rpx;
							}

							.line {
								width: 200rpx;
								background-color: #FD4154;
								height: 4rpx;
								position: absolute;
								left: 50%;
								transform: translateX(-50%);
							}
						}

					}

					&-tip {
						background-color: #FD4154;
						margin-top: 30rpx;
						border-radius: 50rpx;
						justify-content: space-between;
						padding: 20rpx 48rpx;
						font-size: 24rpx;
						color: #fff;
						margin-bottom: 24rpx;
					}

					&-more {
						.item {

							font-size: 32rpx;

							padding: 30rpx 20rpx;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 20rpx;
							border-bottom: 2rpx solid #eee;

							.left {
								align-items: center;

								.num {
									color: #F17229;
									font-weight: 700;
									padding-right: 20rpx;
									width: 120rpx;
								}
								.num text{
									text-align: center;
									margin-left: 15rpx;
									
								}

								.name {
									padding-left: 20rpx;
									font-weight: 700;
									font-size: 28rpx;
								}
							}

							.right {
								font-size: 24rpx;
								color: #999;
							}
						}

						.item-order {
							border: 2rpx dashed #F17229;
						}
					}
				}
			}

			.pop-cover {
				height: 100%;
				max-width: 1280rpx;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 12;

				&-bg {
					height: 100%;
					max-width: 1280rpx;
					position: fixed;
					top: 0;
					width: 100%;

					background: rgba(0, 0, 0, .7);
					overflow: hidden;
					z-index: 2003;
				}

				&-tip {
					background: url() no-repeat 100% 0;
					background-size: auto auto;
					box-sizing: border-box;
					color: #fff;
					padding: 110rpx 0 0;
					position: fixed;
					right: 40rpx;
					text-align: left;
					top: 88rpx;
				 width: 570rpx;
				 z-index: 3000;
				}
			}
		}

		&-footer {
			position: fixed;
			background-color: #FD5C38;
			bottom: 0;
			z-index: 9;
			width: 100%;
			align-items: center;
			padding-bottom: env(safe-area-inset-bottom);

			.foot-cont {

				padding: 20rpx 30rpx 16rpx;
			}

			.line {
				width: 60rpx;
			}

			/deep/ button {
				color: #fd5c38 !important;
				font-weight: 700;
			}

			// fd5c38
		}

	}
	
	.list1 {
		padding: 32rpx;
		background-color: #F95556;
		.item {
			background-color: #fff;
			position: relative;
			padding: 52rpx;
			margin-bottom: 30rpx;
			&-header {
				align-items: center;
				justify-content: space-between;
				.left {
					text-align: center;
					.img {
						border: 4rpx solid #BDBDBD;
						border-radius: 50%;
					}
					.title {
						padding: 10rpx 0;
						font-size: 32rpx;
					}
				}
				.center {
					text-align: center;
					.icon {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #3EB734;
						align-items: center;
						justify-content: center;
						margin: 0 auto;
					}
					.title {
						font-size: 24rpx;
						padding-top: 10rpx;
					}
				}
			}
			&-main {
				color: #999;
				font-size: 26rpx;
				margin-top: 40rpx;
				padding-bottom: 30rpx;
				.li {
					margin-bottom: 10rpx;
					align-items: center;
					image{
						width: 26rpx;
						height: 26rpx;
						padding-right: 10rpx;
						
					}
				}
				border-bottom: 2rpx solid #eee;
			}
			
			&-footer {
				padding: 32rpx 0; 
				align-items: center;
				justify-content: space-between;
				.num {
					color: #3EB734;
					font-size: 42rpx;
					font-weight: 700;
				}
			}
			
			&-succ {
				width: 180rpx;
				height: 180rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				z-index: 2;
			}
			
		}
		.item::before {
		    content: ' ';
			width: 0;
			/* height: 100%; */
			height: 0;
			width: 100%;
			position: absolute;
			border-bottom: 16rpx dotted #FA5355;
			top: -10rpx;
			left: 0px;
		}
		
		.item::after {
		    content: ' ';
			height: 0;
			width: 100%;
			position: absolute;
			border-bottom: 16rpx dotted #FA5355;
			bottom: -10rpx;
			left: 0px; 
		
		}
	}
	
	
</style>
